<script setup lang="ts">
import { ref,onMounted, computed} from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { TabsPaneContext } from 'element-plus'
import openPanel from '@/assets/bit-screen/monitor/openPanel_L.png'
import closePanel from '@/assets/bit-screen/monitor/closePanel_L.png'
import TreeSelector from './components/TreeSelector.vue'
import {getAirportList} from '@/api/home'
// 搜索机场
const airportName = ref<string>('')
const isSearched=ref(false) 
const searchList=ref([])
const allPort=ref([] as any)
const taskPort=ref([] as any)


// 把接口返回数据处理成 需要的结构
const dealData=(nowPort)=>{
  nowPort.map((item,index)=>{
  item.open=true;
  item.checked=false
  item.status='在线'
  item.id=item.id.toString()
  item.children=[
    { id: `child${item.id}-1`, name: `${item.name}舱内画面`,url:item.internalMonitorUrl, checked: false,astatus:item.astatus },  
    { id: `child${index + 1}-2`, name: `${item.name}舱外画面`,url:item.internalMonitorUrl, checked: false },  
  ]
  if(item.cameraUrl){
    item.children.push( { id: `child${index + 1}-3`, name: `${item.name}无人机画面`,url:item.cameraUrl, checked: false })
  }
  })
}
// 点击搜索机场
const searchAirport = () => {
  isSearched.value=true
  searchList.value.splice(0,searchList.value.length)

  // 如果是当前选中的是任务中机场
  if(activeName.value=='first'){
   
    taskPort.value.map((item)=>{
      if(item.name.includes(airportName.value)){
        searchList.value.push(item)
      }
    })

  }else{
      allPort.value.map((item)=>{
      if(item.name.includes(airportName.value)){
        searchList.value.push(item)
      }
    })

  }

}

const activeName = ref('first')
const tabList = ref([
  { label: '任务中机场', name: 'first' },
  { label: '全部机场', name: 'second' }
])


const props = defineProps({
  cell: { type: Number, required: true },
  showPortList: { type: Array, default: () => [] }
})

const emit=defineEmits(['updateCell','updateShowList','clearPlayList'])
// 清除所有列表选中状态
const clearChecked=()=>{
  allPort.value.map((item)=>{
    if(item.children.length>0){
      item.checked=false
      item.children.map((it)=>{
        it.checked=false
      })
    }else{
      item.checked=false
    }
  })
  taskPort.value.map((item)=>{
    if(item.children.length>0){
      item.checked=false
      item.children.map((it)=>{
        it.checked=false
      })
    }else{
      item.checked=false
    }
  })

}
const sendCell = (num:number) => {

  clearChecked()
  emit('updateCell',num)
}
// 默认开启
const drawer = ref(true)
const toggleDrawer = () => {
  drawer.value = !drawer.value
}

const handleChange=(data)=>{
  allPort.value=data
}
// 切换任务中和全部机场
const handleClick = (tab: TabsPaneContext, event: Event) => {
  airportName.value=''
  isSearched.value=false
  searchList.value.splice(0,searchList.value.length)
  // 清空所有机场选中
  clearChecked()
  emit('clearPlayList')
  
}

// 接口调用获取机场列表数据
    const handleGetAirportList=async ()=>{
      const res=await getAirportList()
      allPort.value= res.data.airportList
      taskPort.value= res.data.runningAirportList
      dealData(allPort.value)
      dealData(taskPort.value)
    }
  onMounted(()=>{
    handleGetAirportList()
  })

</script>

<template>
    <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-if="!drawer"
    :src="openPanel"
    alt=""
  />
  <img
    class="side-icon"
    @click="toggleDrawer"
    :class="[drawer ? 'isOpen' : 'isClose']"
    v-else
    :src="closePanel"
    alt=""
  />
  <div class="lf-con" :class="[drawer ? 'lf-isOpen' : 'lf-isClose']">
    <p class="flex justify-between"
      ><span class="title-box">机场列表</span>
       <p>
        <Icon @click="sendCell(4)" class="icon" :class="{'icon_active':cell===4}"  icon="svg-icon:fourCell" :size="13" />
        <Icon @click="sendCell(9)" class="icon" :class="{'icon_active':cell===9}"   icon="svg-icon:nineCell" :size="13" />
      </p>
    </p>
    <div class="mt-4">
      <el-input
        v-model="airportName"
        style="max-width: 600px; height: 40px; margin-bottom: 15px"
        placeholder="请输入机场名称"
      >
        <template #append>
          <el-button :icon="Search" @click="searchAirport" />
        </template>
      </el-input>
      <el-tabs  stretch v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.label"
          :name="item.name"
        >
          <TreeSelector :cell="cell" :allPort="allPort" :isSearched="isSearched"  :taskPort="taskPort" :searchList="searchList" @changePortStatus="handleChange" :activeTab="activeName"/>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.el-input__wrapper){
  background-color: none;
  background: rgba(255, 255, 255, 0);
  border: 1px solid #0C6EBA;
}
:deep(.el-tabs__item){
  color: white !important;
}
:deep(.el-checkbox){
  color: white !important;
}
.lf-isClose {
  z-index: -1;
  width: 0;
  position: absolute;
}
.lf-isOpen {
  width: 19.5%;
  z-index: 2001;
  position: absolute;
  left: 15px;
  background: rgba(9, 36, 74, 0);
  height: 93.3%;
  box-shadow: none;
  overflow-y: auto;
  background-color: @main-bgColor;
  border: 1px solid #0C6EBA;
  padding: 22px 12px;
}

// 背景色
@main-bgColor: #10223f;
@second-bgColor: #3c60de;
@main-color:#C4D7EE;
:deep(.tree-item){
  margin-bottom: 10px;
  
}

.side-icon {
  position: absolute;
  z-index: 9999;
  top: 70%;
  height: 179px;
  height: 21.2%;
  transform: translateY(-50%);
  left: 14px;
  left: -5px;
  cursor: pointer;
  width: 40px;
height: 80px;
}
.isOpen {
  position: absolute;
  left: calc(19% + 23px);
  z-index: 9999 !important;

}
.lf-con {
  .title-box{
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #F6F9FE;
    font-style: italic;
    background: linear-gradient(180deg, rgba(14,197,236,0.8) 0%, rgba(49,190,255,0.8) 0%, rgba(255,255,255,0.8) 58.7646484375%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: 100px;

  
  }
  .icon{
    color: #818595;
    margin-right: 10px;
    cursor: pointer;
  }
  .icon_active{
    color: white;
  }
}

:deep(.el-input-group__append) {
  background-color: @second-bgColor;
  
}
:deep(.el-icon) {
  color: white;
}
:deep(.el-checkbox.el-checkbox--large .el-checkbox__inner){
  border: 1px solid rgb(112, 108, 108);


}
:deep(.el-input__inner){
  color: white;

}


:deep(.el-tabs__item.is-top.is-active) {
  color: white;
  background-color: @second-bgColor;
  background: rgba(57,109,230,0.55);
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
@media screen and (max-width: 1600px) {
  .lf-isOpen {
    width: 22%;
  }
  .isOpen {
    position: absolute;
    left: calc(22% + 15px);
    z-index: 9999 !important;
}

}
</style>
